<template lang="">
    <div :class="{active : isActive === true}" @mouseenter="mouseEnter" @mouseleave="mouseLeave"
        @click="selectItem(item.queId)">
        <div class="bank-item">
            <p class="item-title">{{item.queQue}}</p>
            <div>
                <el-tag :type="tag(item.queType)">
                    {{type(item.queType)}}
                </el-tag>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'BankItem',
        data() {
            return {
                isActive: false,
                question: {},
            }
        },
        props: ['item'],
        methods: {
            type(queType) {
                if (queType == '0') {
                    return '单选题'
                } else if (queType == '1') {
                    return '多选题'
                } else if (queType == '2') {
                    return '填空题(多行)'
                }else if(queType == '3'){
                    return '填空题(单行)'
                }else if(queType == '4'){
                    return '下拉框'
                }
            },
            tag(queType) {
                if (queType == '0') {
                    return ''
                } else if (queType == '1') {
                    return 'warning'
                } else if (queType == '2' || queType == '3') {
                    return 'danger'
                }else if( queType == '4'){
                    return 'success'
                }
            },
            mouseEnter() {
                this.isActive = true
            },
            mouseLeave() {
                this.isActive = false
            },
            selectItem(queId) {
                axios({
                    methods: 'GET',
                    url: '/questionBank/getQuestionById',
                    withCredentials: true,
                    params: {
                        id: queId
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    let ques = result.data.data
                    if (ques.queType == 0) {
                        this.$bus.$emit('addNewSimpleFromBank', result.data.data)
                    } else if (ques.queType == 1) {
                        this.$bus.$emit('addNewMultipleFromBank', result.data.data)
                    } else if (ques.queType == 2 || ques.queType == 3) {
                        this.$bus.$emit('addNewFillFromBank', result.data.data)
                    }else if(ques.queType == 4){
                        this.$bus.$emit('addNewDropFromBank',result.data.data)
                    }
                }).catch((err) => {
                    /* let test = {
                        "queId": 1,
                        "queQue": "这是标题",
                        "queType": "0",
                        "queOptionA": "A,V,B",
                        "queOptionB": "A,V,B",
                        "queOptionC": "A,V,B",
                        "queOptionD": "A,V,B",
                    }
                    if (test.queType == 0) {
                        this.$bus.$emit('addNewSimpleFromBank', test)
                    } else if (test.queType == 1) {
                        this.$bus.$emit('addNewMultipleFromBank', test)
                    } else if (test.queType == 2) {
                        this.$bus.$emit('addNewFillFromBank', test)
                    } */
                });
            }
        },
    }
</script>
<style scoped>
    .item-title {
        margin: 10px;
        white-space: nowrap;
        word-wrap: normal;
        word-break: keep-all;
        overflow: hidden;
    }

    .active {
        background-color: #f3f3f3;
        color: #409EFF;
    }

    .bank-item {
        padding: 10px 0px;
    }
</style>